{% extends "base.html" %}
{% block title %}{{ _('Debugger - ') + function_name }}{% endblock %}
{% block init_script %}

try {
  require(
    ['sources/generated/debugger_direct', 'sources/generated/browser_nodes', 'sources/generated/codemirror'],
    function(pgDirectDebug) {
      var pgDirectDebug = pgDirectDebug || pgAdmin.Tools.DirectDebug;
      var $ = pgDirectDebug.jquery;

      pgDirectDebug.load({{ uniqueId }}, {{ debug_type }}, '{{ function_name_with_arguments }}', '{{layout|safe}}');

      // Register unload event on window close.
      /* If opened in new tab, close the connection only on tab/window close and
       * not on refresh attempt because the user may cancel the reload
       */
      if(window.opener) {
        $(window).on('unload', function(ev) {
          $.ajax({
            method: 'DELETE',
            url: "{{ url_for('debugger.index') }}close/{{ uniqueId }}"
          });
        });
      } else {
        $(window).on('beforeunload', function(ev) {
          $.ajax({
            method: 'DELETE',
            url: "{{ url_for('debugger.index') }}close/{{ uniqueId }}"
          });
        });
      }
    },
    function() {
      console.log(arguments);
    });
} catch (err) {
  console.log(err);
}
{% endblock %}
{% block body %}
{% if is_desktop_mode and is_linux %}
<style>
    body
    .alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform: none;}
    .alertify-notifier{-webkit-transform: none;}
    .alertify-notifier .ajs-message{-webkit-transform: none;}
    .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
</style>
{% endif %}
<div class="debugger_main_container" tabindex="0">
    <div id="btn-toolbar" class="editor-toolbar" role="toolbar" aria-label="">
        <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-sm btn-secondary btn-step-into" id="btn-step-into"
                    title=""
                    accesskey=""
                    tabindex="0"
                    autofocus="autofocus"
                    aria-label="{{ gettext('Step into') }}"
                    disabled>
                <i class="fa fa-indent sql-icon-lg" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-secondary btn-step-over" id="btn-step-over"
                    title=""
                    accesskey=""
                    tabindex="0"
                    aria-label="{{ gettext('Step over') }}"
                    disabled>
                <i class="fa fa-outdent sql-icon-lg" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-secondary btn-continue" id="btn-continue"
                    title=""
                    accesskey=""
                    tabindex="0"
                    aria-label="{{ gettext('Continue/Start') }}"
                    disabled>
                <i class="fa fa-play-circle sql-icon-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-sm btn-secondary btn-toggle-breakpoint" id="btn-toggle-breakpoint"
                    title=""
                    accesskey=""
                    tabindex="0"
                    aria-label="{{ gettext('Toggle breakpoint') }}"
                    disabled>
                <i class="fa fa-circle sql-icon-lg" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-secondary btn-clear-breakpoint" id="btn-clear-breakpoint"
                    title=""
                    accesskey=""
                    tabindex="0"
                    aria-label="{{ gettext('Clear all breakpoints') }}"
                    disabled>
                <i class="fa fa-ban sql-icon-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-sm btn-secondary btn-stop" id="btn-stop"
                    accesskey=""
                    title=""
                    tabindex="0"
                    aria-label="{{ gettext('Stop') }}"
                    disabled>
                <i class="fa fa-stop-circle sql-icon-lg" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div id="container" class="debugger-container" tabindex="0"></div>
</div>
{% endblock %}

{% block css_link %}
{% for stylesheet in stylesheets %}
<link type="text/css" rel="stylesheet" href="{{ stylesheet }}"/>
{% endfor %}
{% endblock %}
